import lessModule from "./index.module.less"
import screenImage from "../../../../../../../../assets/image/panoramicMonitoringPage-screen.png"
import { $eventBus } from "../../../../../../../../common/utils"
import { Checkbox } from "antd"
import { CheckboxChangeEvent } from "antd/es/checkbox"
import { useEffect, useState } from "react"
import { log } from "node:console"

// 主页-全景监控页面-浮层组件-筛选组件
const HomePage_PanoramicMonitoringPage_LayerComponent_ScreenComponent: React.FC = () => {

  useEffect(() => {
    init_checkedData()
  }, [])
  const rowList = [
    {
      title: "变电站",
      key: "subStation",
      children: ["500kV", "220kV", "110kV"]
    },
    {
      title: "电网线",
      key: "line",
      children: ["500kV", "220kV", "110kV"]
    },
    {
      title: "地铁站",
      key: "subwayStation",
      children: ["牵引变电站/车站"]
    },
    {
      title: "地铁线",
      key: "subwayLine",
      children: ["地铁线"]
    },
  ]
  const [checkedData, setCheckedData] = useState<object>({})
  const [isDetail, setIsDetail] = useState<boolean>(false)

  const change_checkBox = (e: CheckboxChangeEvent, key: string) => {
    e.target.checked ? checkedData[key].push(e.target.value) : checkedData[key].splice(checkedData[key].indexOf(e.target.value), 1)
    emit_mapOverlayFilter(checkedData)
    setCheckedData({ ...checkedData })
  }

  const init_checkedData = () => {
    rowList.forEach((item) => {
      checkedData[item["key"]] ??= []
      item["children"].forEach((childrenItem) => {
        checkedData[item["key"]].push(childrenItem)
      })
    })
    emit_mapOverlayFilter(checkedData)
    setCheckedData({ ...checkedData })
  }
  const emit_mapOverlayFilter = (checkedData: object) => {
   setTimeout(() => {
    
    $eventBus.emit("mapOverlayFilter", { source: "HomePage_PanoramicMonitoringPage_LayerComponent_ScreenComponent", explain: "已发送复选框数据，请进行地图覆盖物的筛选！", data: { checkedData } })
   });

  }
  return (
    <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentScreenComponent"]}>
      <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentScreenComponent-btn"]} onClick={() => { setIsDetail(!isDetail) }}>
        <span>筛选</span>
        <img src={screenImage} />
      </div>
      {
        isDetail && <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentScreenComponent-detail"]}>
          {
            rowList.map((item, idx) => {
              return (
                <div key={`rowItem${idx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentScreenComponent-detail__row"]} style={{ borderTop: idx ? "1px solid rgba(0, 0, 0, 0.15)" : "none" }}>
                  <div className={lessModule["detail-row__left"]}>
                    <div className={lessModule[`row-left__logo${idx}`]} />
                    <span>{item["title"]}</span>
                  </div>
                  <div className={lessModule["detail-row__right"]}>
                    {
                      item["children"].map((childrenItem, idx) => {
                        return (
                          <Checkbox key={`childrenItem${idx}`} value={childrenItem} checked={checkedData[item["key"]]?.includes(childrenItem)} onChange={(e) => change_checkBox(e, item["key"])}>{childrenItem}</Checkbox>
                        )
                      })
                    }
                  </div>
                </div>
              )
            })
          }
        </div>
      }
    </div>
  )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_ScreenComponent